<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>评分卡配置</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>

    <body>
        <div id="app" style="width:100%">
            <el-form ref="form" label-width="auto">
                <el-tabs value='config'>
                    <el-tab-pane label="基本信息" name="rbasic">
                        <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
                    </el-tab-pane>
                    <el-tab-pane label="规则配置" name="config">
                        <el-form-item label="初始得分">
                            <el-input v-model="ruleDef.score"></el-input>
                        </el-form-item>
                        <el-form-item label="转换函数">
                            <el-cascader style='width: 100%;' :props="{label:'label',value:'id',children:'list',expandTrigger:'hover',emitPath:false}"
                                v-model='ruleDef.transform' placeholder="对累加得分转换处理的函数" :options="functionList"
                                filterable clearable>
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button @click='triggerClass9Dialog'>添加评分项(分类)</el-button>
                        </el-form-item>
                        <el-table :data="ruleDef.list" style="width: 100%;margin-bottom: 20px;" :span-method="onMergeVariableColumn"
                            row-key="id" border default-expand-all :tree-props="{children: 'list', hasChildren: 'hasChildren'}">

                            <el-table-column prop="referName" label="分段" min-width="80%">
                                <template slot-scope="scope">
                                    <span>{{scope.row.referName}}</span>&nbsp;&nbsp;
                                    <el-link v-if="scope.row.list" type="danger" @click='triggerDeleteClass9Event(scope.row)'>移除此评分项
                                    </el-link>
                                </template>
                            </el-table-column>

                            <el-table-column prop="score" label="得分">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.list"></span>
                                    <el-input v-else v-model="scope.row.score"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="reasonId" label="政策原因">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.list"></span>
                                    <el-cascader v-else style='width: 100%;' :props="{label:'label',value:'id',children:'list',expandTrigger:'hover',emitPath:false}"
                                        v-model='scope.row.reasonId' placeholder="关键字搜索" :options="reasonList"
                                        filterable clearable>
                                    </el-cascader>
                                </template>
                            </el-table-column>
<!--                            <el-table-column prop="categoryId" label="政策分类">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.list"></span>
                                    <el-cascader v-else style='width: 100%;' :props="{label:'label',value:'id',children:'list',expandTrigger:'hover',emitPath:false}"
                                        v-model='scope.row.categoryId' placeholder="关键字搜索" :options="categoryList"
                                        filterable clearable>
                                    </el-cascader>
                                </template>
                            </el-table-column> -->
                            <el-table-column prop="userdef" label="用户自定义">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.list"></span>
                                    <el-input v-else v-model="scope.row.userdef" placeholder="文本内容需引号''包裹"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                        
                        <el-form-item label="">
                            <el-button type="primary" @click='triggerUpdateRuleEvent'>保存修改</el-button>
                            &nbsp;&nbsp;
                            <el-button type="danger" @click='triggerDeleteRuleEvent'>删除规则</el-button>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="规则测试" name="test">
                        <hc-test :rpath="ruleDef.rpath" :inputs='ruleDef.rtest' @save-inputs="ruleDef.rtest = $event"></hc-test>
                    </el-tab-pane>
                </el-tabs>
            </el-form>

        </div>

        <script src="/lib/ace-noconflict/ace.js"></script>
        <link rel="stylesheet" href="/com/hc-lang-editor.css"/>
        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
            import {} from '/com/hc-test.js'
            import {} from '/com/hc-rule-basic-properties.js'
            import HcRuleClass9Dialog from '/com/hc-rule-class9-dialog.js'
            
            function onDeleteClass9Event(varrow) {
                let index = vm.ruleDef.list.findIndex(it => it.id == varrow.id)
                vm.ruleDef.list.splice(index, 1);
            }

            // var vm
            let rpath = $util.getUrlArgOrDefault('rpath', 'xsxdjc/BasicScorecard')

            $rest.check$pinfoOrLoad(
                function() {
                    $rest.obtainRuleDefByRpath(rpath, initvm);
                }, 'xsxdjc/Main');


            function initvm(ruleDef) {
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        ruleDef: ruleDef,
                        categoryList: [],
                        reasonList: [],
                        functionList:[],
                    },
                    methods: {
                        triggerUpdateRuleEvent: function() {
                            $rest.updateRuleDefInVm(this)
                        },
                        triggerDeleteRuleEvent: function() {
                            $rest.deleteRuleDefInVm(this)
                        },
                        triggerDeleteClass9Event: onDeleteClass9Event,
                        onMergeVariableColumn: onMergeVariableColumn,
                        triggerClass9Dialog: function() {
                            class9SelectDlg.show()
                        },
                    }
                });

                $rest.obtainRuleDefByRpath($pinfo.pcode() + '/PolicyCategory',
                    function(rule) {
                        vm.categoryList = $util.$tree.traverse(rule.list, (it) => {
                            it.label = it.code + '：' + it.name
                        });
                    });

                $rest.obtainRuleDefByRpath($pinfo.pcode() + '/PolicyReason',
                    function(rule) {
                        vm.reasonList = $util.$tree.traverse(rule.list, (it) => {
                            it.label = it.code + '：' + it.name
                        });
                    });
                    
                $rest.obtainRuleDefByRpath($pinfo.pcode() + '/Func',
                    function(rule) {
                        vm.functionList = $util.$tree.traverse(rule.list, (it) => {
                            it.label = it.code + '：' + it.name
                        });
                    });
            
                window.class9SelectDlg = new HcRuleClass9Dialog({
                    ruledefinition: true,
                    exclude: function(rpath) {
                        if (typeof(vm) == 'undefined') return false;
                        return vm.$data.ruleDef.list.find(it => it.referId == rpath)
                    },
                    class9selected: function(class9Def) {
                        let varclass = {
                            id: ++vm.ruleDef.rmaxid,
                            referId: class9Def.rpath,
                            referName: class9Def.rname,
                            list: [],
                        }
                
                        class9Def.list.forEach(ele => {
                            varclass.list.push({
                                id: ++vm.ruleDef.rmaxid,
                                referId: ele.id,
                                referName: ele.name?ele.code+':'+ele.name:ele.code,
                                score: 0
                            });
                        });
                        vm.$data.ruleDef.list.push(varclass);
                    }
                });
            
            };

            function onMergeVariableColumn({
                row,
                column,
                rowIndex,
                columnIndex
            }) {
                let colspan = 1;
                if (row.list) {
                    if (columnIndex == 0) {
                        colspan = 5;
                    } else {
                        colspan = 0;
                    }
                }
                return {
                    rowspan: 1,
                    colspan: colspan
                };
            }
        </script>
    </body>

</html>
